<template>
  <ul class="switches">
    <li class="switch-item" v-for="(item,index) in switches"
     :class="{'active': currentIndex === index}" :key="index" @click.stop="switchItem(index)">
      <span>{{item.name}}</span>
    </li>
  </ul>
</template>
<script>
export default {
    props:{
        switches:{
            type:Array,
            default:[]
        },
        currentIndex:{
            type:Number,
            default:0
        }
    },
    methods:{
        switchItem(index){
            this.$emit("switch",index)
        }
    }
};
</script>
<style lang="stylus">
@import '../../common/stylus/variable';

.switches {
  display: flex;
  align-items: center;
  width: 240px;
  margin: 0 auto;
  border: 1px solid $color-highlight-background;
  border-radius: 5px;

  .switch-item {
    flex: 1;
    padding: 8px;
    text-align: center;
    font-size: $font-size-medium;
    color: $color-text-d;
    list-style none

    &.active {
      background: $color-highlight-background;
      color: $color-text;
    }
  }
}
</style>